<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/9 0009
  Time: 14:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>已结算账单</title>
  <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      font-family: "微软雅黑";
      font-size: 12px;
    }

    a{
      color: #27B5F3;
      font-size: 14px;
      text-decoration: none;
    }
    a:hover{
      text-decoration: none;
      color: #27B5F3;
    }
    .top-active{
      background-color: #27B5F3;
      color: #FFF;
      text-align: center;
      width: 100px;
      display: inline-block;
      padding:5px 0;
      margin-left:1%
    }
    .topTittleLine {
      height: 1px;
      width: 100%;
      background-color: #27B5F3;
      margin-bottom: 20px;
    }
    .btn{
      color: #27B5F3;
      width: 100px;
      text-align: center;
      display: inline-block;
      padding: 8px 0;
      float: left;
      border-bottom: 1px solid #27B5F3;
    }
    .btn1{
      background: #27B5F3;
      color: #FFF;
    }
    .btn2{
      background: #EB9418;
    }
    .btn3{
      background: #F14D4E;
    }
    .inputs{
      border: 1px solid #DDD;
      height: 24px;
      line-height: 24px;
      width: 15%;
      margin-right: 4%;
      padding-left: 10px;
    }
    select{
      border: 1px solid #DDD;
      height: 24px;
      line-height: 24px;
      width: 5%;
      margin-right: 2%;
    }
    .search{
      padding: 3px 25px;
      background: #27B5F3;
      color: #FFF;
      border-radius: 5px;
    }
    table{
      width: 94%;
      border: 0;
      margin-left: 2%;
      margin-top: 10px;
      color: #666;
      border: 1px solid #DDD;
    }
    table tbody tr td{
      border-bottom: 1px solid #CCC;
    }
    table thead th{
      background: #DDD;
      padding: 5px 0;
    }
    table tbody td{
      text-align: center;
      height: 30px;
      line-height: 30px;
      vertical-align: middle;
    }
    table tfoot td{
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    .tip{
      width: 10px;
      margin-right: 3px;
    }
  </style>
</head>
<body>
<span style="margin-left:1%"><a href="/shortcut/billingSkip" class="topTitlt">收银开单</a></span>
<span style="margin-left:1%"><a href="/shortcut/forCount" class="topTitlt">待结算账单</a></span>
<div class="topTittle top-active">已结算账单</div>
<div class="topTittleLine clearfix"></div>
<div style="margin: 0 25% 0 2%;display:inline-block;">
  <a href="#"><div class="btn btn1">今天</div></a>
  <a href="#"><div class="btn">本月</div></a>
  <a href="#"><div class="btn">本年</div></a>
</div>
<span>关键字：</span><input type="text" class="inputs" placeholder="请输入会员姓名/手机号">
<span>提成人员</span>
<select>
  <option>1</option>
  <option>1</option>
</select>
<span>所属门店</span>
<select>
  <option>1</option>
  <option>1</option>
</select>
<a href="" class="search">搜索</a>
<table cellspacing="0">
  <thead>
  <tr>
    <th>序号</th>
    <th>单号</th>
    <th>姓名</th>
    <th>手机号</th>
    <th>项目/商品名</th>
    <th>卡类型</th>
    <th>次数</th>
    <th>有效期</th>
    <th>售价</th>
    <th>数量</th>
    <th>应结金额</th>
    <th>合计</th>
    <th>实收</th>
    <th>支付方式</th>
    <th>提成人员</th>
    <th>协助人员</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>123129647</td>
    <td>张三</td>
    <td>123129647</td>
    <td>美白护肤</td>
    <td>疗程卡</td>
    <td>10次</td>
    <td>2017.01.01-2018.01.01</td>
    <td>1000</td>
    <td>1</td>
    <td>1000</td>
    <td>1000</td>
    <td>1000</td>
    <td>现金：500 余额：500</td>
    <td>张三</td>
    <td>李四</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="9">合计</td>
    <td>3</td>
    <td>3000</td>
    <td>3000</td>
    <td>3000</td>
    <td colspan="3"></td>
  </tr>
  </tfoot>
</table>
<script>
    function del(){
        $("input:checkbox:checked").parent().parent().remove();
    }
    $(function(){
        $(".btn").click(function(){
            $(".btn").removeClass("btn1")
            $(this).addClass("btn1")
        })
    })
</script>
</body>
</html>

